
<template>
	<view >		
		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">缴费记录明细</block>				
			</cu-custom>
			<!-- list列表 -->
			<view style="padding: 0 10px 0  10px;">			
			<view class="cu-list menu" >
				
				<view class="cu-item animation-slide-bottom" style="margin-top: 10px;" :style="[{animationDelay: '0.1s'}]">
					<view class="content">
						<text class="text-grey">总缴金额</text>
					</view>
					<view class="action">
						<view class="text-red" style="font-size: 32upx;">{{ payData.payMoney}}</view>
					</view>
				</view>
			</view>	
			<view class="cu-list menu">	
				
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
					<view class="content">
						<text class="text-grey">缴费账号</text>
					</view>
					<view class="action">
						<text class="text-grey">{{payData.accCode}}</text>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.3s'}]">
					<view class="content">
						<text class="text-grey">用户姓名</text>
					</view>
					<view class="action">
						<text class="text-grey">{{payData.accName}}</text>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.4s'}]">
					<view class="content">
						<text class="text-grey">查询月份</text>
					</view>
					<view class="action">
						<text class="text-grey">{{payData.payDate}}</text>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.5s'}]">
					<view class="content">
						<text class="text-grey">记录数</text>
					</view>
					<view class="action">
						<text class="text-grey">{{payData.payNumber}}</text>
					</view>
				</view>
			</view>
			
			<view class="cu-list menu" >
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.9s'}]">
					<view class="content">
						<text class="text-grey">缴费明细</text>
					</view>					
				</view>
				<view class="cu-item animation-slide-bottom" style="background-color:#e2f1ed" v-for="(itemWay, indexWay) in payData.feePayWay" :key="indexWay">
					<view class="content">
						<text class="text-grey">{{itemWay.wayDate}}</text>
					</view>	
					<view class="content">
						<text class="text-grey">{{itemWay.payWay}}</text>
					</view>	
					<view class="action">
						<text class="text-grey">￥{{itemWay.wayMoney}}</text>
					</view>
				</view>
				
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.5s'}]">
					<view class="content">
						<text class="text-grey">扣款水费：{{payData.kouMoney}}</text>
					</view>
					<view class="action">
						<text class="text-grey">变动余额：{{payData.changeMoney}}</text>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.5s'}]">
					<view class="content">
						<text class="text-grey">扣款明细：</text>
					</view>					
				</view>
				
				<view class="uni-container" v-if="payData.payDetail.length>0">
					<uni-table ref="table" :loading="loading" border stripe
						emptyText="暂无更多数据"  >
						<uni-tr style="font-size: 12px;">													
							<uni-th  align="center">户号</uni-th>
							<uni-th  align="center">户名</uni-th>
							<uni-th  align="center">月份</uni-th>
							<uni-th  align="center">起度</uni-th>
							<uni-th  align="center">止度</uni-th>
							<uni-th  align="center">水量</uni-th>
							<uni-th  align="center">水费</uni-th>
							<uni-th  align="center">污水费</uni-th>
							<uni-th  align="center">垃圾费</uni-th>
							<uni-th  align="center">违约金</uni-th>
							<uni-th  align="center">合计</uni-th>
							<uni-th  align="center">上次余额</uni-th>
							<uni-th  align="center">本次余额</uni-th>
							<uni-th  align="center">缴费时间</uni-th>
						</uni-tr> 
						<uni-tr v-for="(item, index) in payData.payDetail" :key="index" style="text-align: center">
							<uni-td>
								<view align="center" class="name">{{item.cusCode}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.cusName}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.readMonth}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.beginScale}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.endScale}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.amount}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.totalMoney}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.wuMoney}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.ljMoney}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.penalty}}</view>
							</uni-td>													
							<uni-td>
								<view align="center" class="name">{{item.money}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.preBalance}}</view>
							</uni-td>	
							<uni-td>
								<view align="center" class="name">{{item.postBalance}}</view>
							</uni-td>	
							<uni-td>
								<view align="center" class="name">{{item.datetime}}</view>
							</uni-td>	
						</uni-tr>
					</uni-table>
				</view>
			</view>	
		</view>

		</scroll-view>
	</view>
</template>

<script>
	import api from '@/api/api.js'	
	export default {
		components:{		    
		 },
		data() {
			return {
				toggleStatus: false,				
				loading: false,
				payData:{
					payMoney:'',
					accCode:'',
					accName:'',				
					payDate:'',					
					payNumber:'',
					feePayWay: [],
					kouMoney: '',
					changeMoney: '',
					payDetail: []
				},
				payParams:{},
				payUrl:'/chg/chgPayments/getPayList',				
			};
		},
		onLoad() {
			// this.selectedIndexs = []
			// this.getData(1)				
		},
		created(){			
			//console.log("this.$Route.query",this.$Route.query);
			this.payParams=this.$Route.query;
			this.loadinfo();
		},
		methods: {
			loadinfo(){				
				//console.log("query:",this.payParams);				
				this.$http.get(this.payUrl,{params:{accCode:this.payParams.accCode,
						createTimeBegin: this.payParams.createTimeBegin,
						createTimeEnd: this.payParams.createTimeEnd}},
					).then(res=> {				
					if (res.data.success) {
						this.payData = res.data.result;
						this.payData.payDate=this.payParams.createTimeBegin+"~"+this.payParams.createTimeEnd
					}
				}).catch(e=>{
					console.log("请求错误",e)
				})
			},			
		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.padding0{
		padding: 0px;
	}	
</style>
